<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartLine',
  props: {
    // value: Object,
    value: Array,
    text: String,
    subtext: String,
    max: Number,
    min: Number
  },
  watch: {
    'value':function(newVal,oldVal){
      console.log(newVal)
      // this.changeChart()
    }
  },
  mounted () {
    this.changeChart()
  },
  methods:{
    changeChart(){
      this.$nextTick(() => {
        let seriesData = this.value.map(_ => _.value)
        let xAxisData = this.value.map(_ => _.time)
        // let seriesData=[];
        // let xAxisData=[];
        // for (var a in this.value) {		
        //   seriesData.push(this.value[a])
        //   xAxisData.push(a);
        // }
        // console.log(seriesData);	
        // console.log(xAxisData);	
        let option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: false},
              saveAsImage: {show: false}
            }
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 30,
              end: 70
            },
            {
              type: 'inside',
              realtime: true,
              start: 30,
              end: 70
            }
          ],
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value',
            axisPointer: {
              snap: true
            },
            min: this.min,
            max: this.max
          },
          series: [{
            name: '历史数据值',
            data: seriesData,
            type: 'line'
          }]
        }
        let dom = echarts.init(this.$refs.dom, 'tdTheme')
        dom.setOption(option)
      })
    }
  }
}
</script>

<style lang="less">

</style>
